<template>
  <div class="div">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="fm" style="border: #d3dce6">

      身份证号:
      <el-input v-model="ruleForm.idid" placeholder="请输入身份证号"   size="mini" class="han"></el-input>

      <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">加载身份证号</el-button>
      <el-button type="warning" icon="el-icon-search" size="mini" @click="onSubmit2">加载患者信息</el-button>
    </el-form>



    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="fm2">
      <el-form-item label="身份证号" prop="name" class="jia">
        <el-input  size="mini" class="jia2"></el-input>
        患者姓名:<el-input  v-model="ruleForm.name" size="mini" class="jia2"></el-input>
        患者电话:<el-input  v-model="ruleForm.phone" size="mini" class="jia2"></el-input>
        <template>
          性别:<el-radio-group v-model="ruleForm.sex">
            <el-radio :label="3">男</el-radio>
            <el-radio :label="6">女</el-radio>
            <el-radio :label="9" class="jia3">未知</el-radio>
          </el-radio-group>
        </template>


       出生日期:
            <el-date-picker type="date" placeholder="选择日期"   size="mini" v-model="ruleForm.date"style="width: 200px;"></el-date-picker>

          </el-form-item>
      患者年龄:<el-input  v-model="ruleForm.age" size="mini" class="jia2"></el-input>
      地址信息:<el-input  v-model="ruleForm.address" size="mini" class="han"></el-input>


      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="fm3">
        <el-radio-group v-model="radio1">
          <el-radio-button label="门诊"></el-radio-button>
          <el-radio-button label="门诊+病例本"></el-radio-button>
          <el-radio-button label="急诊"></el-radio-button>
          <el-radio-button label="急诊+病历本" class="jia4"></el-radio-button>
        </el-radio-group>
      挂号费:120￥<el-button type="danger">挂号收费</el-button>
      </el-form>



      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="fm4">
        <el-form-item label="所属科室" prop="region" size="mini">
          <el-select v-model="ruleForm.region" placeholder="请选择所属科室">
            <el-option label="心电图" value="shanghai"></el-option>
            <el-option label="外科" value="beijing"></el-option>
          </el-select>
         挂号类型:<el-select v-model="ruleForm.guahaoleixing" placeholder="请选择挂号类型">
            <el-option label="门诊" value="shanghai"></el-option>
            <el-option label="急诊" value="beijing"></el-option>
          </el-select>
          挂号时段:<el-select v-model="ruleForm.guahaoshiduan" placeholder="请选择挂号时段">
          <el-option label="上午" value="shanghai"></el-option>
          <el-option label="下午" value="beijing"></el-option>
        </el-select>
          挂号时间:
          <el-date-picker type="date" placeholder="选择日期"   size="mini" v-model="ruleForm.guahaoshijian"style="width: 200px;" class="jia5"></el-date-picker>

          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" icon="el-icon-search">重置</el-button>
        </el-form-item>
      </el-form>


      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="科室id"
          width="600">
        </el-table-column>
        <el-table-column
          prop="name"
          label="科室名称"
          width="600">
        </el-table-column>
        <el-table-column
          prop="address"
          label="当前号数">
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>



    </el-form>



  </div>


</template>


<script>

  export default {
    data() {
      return {
        radio: 3,
        radio1: '门诊',
        ruleForm: {
          name: '',
          date1: '',
          date2: '',
          input: '',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],

        }
      }
    }
  }


</script>


<style scoped>
  .div {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    margin-top: 40px;
    width: 100%;

  }

  .jia {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    margin-top: 10px;

  }

  .jia2 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    width: 200px;

  }
  .jia3 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    margin-right: 20px;

  }
  .jia4 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    margin-right: 900px;
  }
  .jia5{
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
   margin-right: 20px;
  }


  .fm {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 15000px;
    height: 100px;

  }
  .fm2 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 1500px;
    height: 100px;
    margin-top: 60px;

  }
  .fm3 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 1500px;
    height: 50px;
    margin-top: 60px;

  }
  .fm4 {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 1500px;
    height: 50px;
    margin-top: 60px;

  }

  .han {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 60px;*/
    margin-right: 20px;
    width: 700px;
  }

</style>
